<template>
    <div class="login">
        <el-card class="login_card">
            <div class="login-card">
                <el-image class="logo_image" :src="logo_url" fit="cover"></el-image>
                <p class="login_title"><strong>Login</strong></p>
                <p class="login_desc"><strong style="font-family: Helvetica Neue">Welcome to login</strong></p>
                <el-form :model="user" :rules="rules" ref="user">
                    <el-form-item prop="username">
                        <el-input
                            placeholder="Please input account"
                            prefix-icon="el-icon-user"
                            v-model="user.username" clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            placeholder="Please input password"
                            type="password"
                            prefix-icon="el-icon-lock"
                            v-model="user.password" clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item style="margin-top: 20px;">
                        <el-button type="primary" 
                                style="background: #5b89fe; color: white; margin-right: 15px;"
                                :loading="loginLoading"
                                @click="login('user')">
                            <strong style="font-size: larger;">Confirm</strong>
                        </el-button>

                        <el-button type="primary" 
                                style="background: #5b89fe; color: white; margin-left: 15px;"
                                @click="register">
                            <strong style="font-size: larger;" @click="register()">Register</strong>
                        </el-button>
                    </el-form-item>     

                    <el-form-item>
                        <el-button size="small" icon="el-icon-refresh-left" @click="reset()">Reset</el-button>
                    </el-form-item>
                </el-form>
            </div>         
        </el-card>
        <!-- footer -->
        <div  class="footer">
            <p>Copyright © 融海云创 All Rights Reserved</p>
        </div>
    </div>
</template>


<script>
import {
  login,
} from "@/api/login.js"

export default{
    data(){
        return{
            user: {
              username: '',
              password: ''
            },
            logo_url: require("@/assets/img/logo.png"),
            errorMessage: '',
            loginLoading: false,
            rules: {
                username:[
                    { required: true, message: "Please input account", trigger: "blur"},
                ],
                password:[
                    { required: true, message: "Please input password", trigger: "blur"}
                ]
            }
        }
    },
    methods:{
        login(forName){
          this.$refs[forName].validate((valid) => {
            if(valid){
              this.loginLoading = true
              //向后端发送请求
              login(this.user)
              .then((response) => {
                if(response.data.code === 200){
                  this.$message.success(response.data.message)
                  sessionStorage.setItem('form', JSON.stringify(this.user))
                  //实现路由跳转
                  this.$router.push('/home')
                }else{
                  this.$message.error(response.data.message)
                  this.loginLoading = false
                }
              }).catch((error) => {
                this.$message.error("服务器连接失败，请稍后尝试...")
                this.loginLoading = false
              })
            }else{
              return false
            }
          })
        },
        register(){
          this.$router.push('/register')
        },
        reset(){
          this.user.username = '',
          this.user.password = ''
        }
    }
}

</script>


<style>
.login-card{
    background-color: rgb(255, 255, 255,0.6);
}
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
.login_card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;  
  bottom: 0;
  margin: auto;
  width: 20%;
  min-width: 350px;
  height: 400px;
  min-height: 500px;
  border-radius: 10px;
  text-align: center;
  opacity: 0.6;
}
.logo_image {
  width: 50px;
  height: 50px;
  margin-top: 40px;
}
.login_title {
  font-size: 30px;
  font-weight: bold;
}
.login_desc {
  font-size: 20px;
  font-family:'Helvetica Neue';
  letter-spacing: 2px;
  color: #999a9a;
}
.el-button {
  width: 45%;
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  color: rgb(183, 181, 181);
}
.wechat_logo {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 100px;
  right: 20px;
}
.home_logo {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 40px;
  right: 20px;
}
.juejin_img,
.offical_img {
  width: 180px;
  height: 200px;
  border-radius: 10px;
  position: fixed;
  right: 80px;
  bottom: 20px;
  display: none;
}
.wechat_logo:hover,
.home_logo:hover {
  border-radius: 50%;
  box-shadow: 0 3px 15px 3px rgba(237, 229, 229, 0.5);
}
.wechat_logo:hover + .offical_img {
  display: block;
}
.home_logo:hover + .juejin_img {
  display: block;
}
.footer:hover {
  color: white;
}

</style>